<template>
  <div id="app">
    <div class="containter">
      <router-view></router-view>
    </div>
    <nav-tab :data="nav" class="tab" @turn="_turn" :activeIndex="active" :bg="bg"></nav-tab>
  </div>
</template>

<script type="text/ecmascript-6">
import NavTab from 'components/nav-tab'
import personalBg from './assets/image/tab/personal.png'
import navlist from 'components/nav-list'
export default {
  name: 'app',
  components: {
    NavTab,
    navlist
  },
  data () {
    return {
      nav: [],
      nav_stud: [
        {name: '首页', url: '/home'},
        {name: '报名', url: '/activity:actype'},
        {name: '优惠券', url: '/coupon'},
        {name: '个人', url: '/personal'}
      ],
      nav_pin: [
        {name: '个人', url: '/personal'}
      ],
      bg: personalBg,
      active: 1
    }
  },
  created() {
     this.fetchData()
  },
  methods: {
    _turn(index) {
      this.active = index
      let url = this.nav[index].url
      this.$router.push(url)
    },
    fetchData() {
      let userType = sessionStorage.getItem('userType')
      if (userType === '1') {
        this.nav = this.nav_pin
      } else {
        this.nav = this.nav_stud
      }
      let path = this.$route.path
      let index = this.nav.findIndex(el => el.url === path)
      if (index === -1 && path === '/personal/activity') {
        index = 0
      }
      this.active = index
    }
  },
  watch: {
    '$route': 'fetchData'
  }
}
</script>

<style scoped lang="less">
  #app{
    width: 100%;
    height:100%;
    .slide-enter-active,.slider-leave-active {
      transition: all 0.3s
    }
    .slide-enter,.slide-leave-to {
      transform: translate3d(100%, 0, 0)
    }
    .containter{
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding-bottom: 100px;
    }
    .tab{
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100px;
      box-sizing: border-box;
      border-top: 2px solid #e6e6e6;
    }
  }
</style>
